<template>
  <div id="app">
    <el-row>
      <el-col :span="22" :offset="1">


        <el-row :gutter="20">
          <el-empty v-if="AuctionList.length<1" description="这里空空如也..."></el-empty>
          <el-col :span="6" v-if="AuctionList.length>0" v-for="auc in AuctionList">
            <!-- <div v-text="auc"></div> -->
            <router-link :to="{name: 'Ces', query: {id:auc.id, productId: auc.productId }}">

              <div class="card">

                <div class="card-head">
                  <el-image :src="getFirstImg(auc.productImg)" style="width: 100%; height: 100%;"></el-image>
                  <div class="card-title">{{auc.productName}}</div>
                  <div v-if="auc.status==2" class="card-tag"><span>已结束</span></div>
                  <div v-if="auc.status==3" class="card-tag"><span>流拍</span></div>
                </div>

                <div class="card-middle">
                  <div v-text="auc.productDetail"
                    style="width: 100%;height: 16px;font-size: 12px;line-height:16px;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">
                  </div>
                  <div v-if="auc.status==0" style="line-height: 30px;padding-top:10px;">起拍价&emsp;&ensp;
                    <!-- 未开拍 -->
                    <span v-if="auc.status==0" style="color:#19aa6b;font-size: 16px;">
                      ￥
                      <b v-text="getPrice(auc.basePrice)" style="font-size: 24px;"></b> </span>
                  </div>
                  <div v-if="auc.status!=0" style="line-height: 30px;padding-top:10px;">当前价&emsp;&ensp;
                    <!-- 如果没有最高价 --> <span v-if="auc.topPrice==null" style="color:#eb0045;font-size: 16px;">
                      ￥ <b v-text="getPrice(auc.basePrice)" style="font-size: 24px;"></b>
                    </span>
                    <!-- 正在拍卖 -->
                    <span v-if="auc.status==1&&auc.topPrice!=null" style="color:#eb0045;font-size: 16px;"> ￥
                      <b v-text="getPrice(auc.topPrice)" style="font-size: 24px;"></b>
                    </span>
                    <!-- 已结束或流拍 --> <span v-if="auc.status!=0&&auc.status!=1&&auc.topPrice!=null"
                      style="font-size: 16px;">
                      ￥
                      <b v-text="getPrice(auc.topPrice)" style="font-size: 24px;"></b> </span>
                  </div>

                  <div style="padding-top: 2px;">加价幅度&ensp;￥{{auc.stepPrice}}</div>
                  <div style="padding-top: 2px;" v-if="auc.status==0"> 开拍时间&ensp; <b
                      v-text="getStartTime(auc.startTime)" style="color:black;"></b> </div>
                  <div v-if="auc.status==1"> 预&emsp;计&emsp;
                    <span v-text="getEndTime(auc.startTime,auc.auctionTime)"></span> 结&emsp;束&emsp;
                  </div>
                  <div v-if="auc.status==2">
                    结&emsp;束&emsp; <span v-text="getEndTime(auc.startTime,auc.auctionTime)"></span> </div>
                </div>

                <div class="card-foot">
                  <b style="color:#666;padding-left: 13px;">{{auc.joinCount}}</b>&ensp;人报名
                </div>

                <div v-if="auc.status==0" class="card-flag" style="background-color: #19aa6b;">
                  即将开拍
                </div>
                <div v-if="auc.status==1" class="card-flag" style="background-color: #eb0045;">
                  正在进行
                </div>

              </div>
            </router-link>
          </el-col>
        </el-row>


        <el-footer v-if="AuctionList.length>0">
          <!-- 页码 -->
          <el-row>
            <el-col :span="20" :offset="2">
              <el-pagination style="text-align: center;" @current-change="handleCurrentChange" hide-on-single-page
                background :current-page="currentPage" :page-size="pageSize" prev-text="上一页" next-text="下一页"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </el-col>
          </el-row>
        </el-footer>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "MyParticipated",
    data() {
      return {
        AuctionList: [],
        currentPage: 1, //当前页
        pageSize: 3, //每页条数
        total: 0, //总条数
        totalPages: 0, //总页数
      }
    },
    methods: {
      getFirstImg(productImg) {
        let imgs = productImg.split(";")
        return imgs[0]
      },
      handleCurrentChange(pageNum) {
        //控制页码
        // 小于1 或者 大于total 或者 仍获取当前页数据 直接返回
        if (pageNum < 1 || pageNum > this.totalPages || pageNum == this.currentPage) {
          console.log(pageNum + " 无效页码值")
          return;
        }
        console.log("GOpageNum:" + pageNum)
        this.currentPage = pageNum;
        console.log("点击后:" + this.currentPage)
        console.log("pS" + this.pageSize)
        this.myAuctionList();
      },
      go(pageNum) {
        console.log("GOpageNum:" + pageNum)
        // 小于1 或者 大于total 或者 仍获取当前页数据 直接返回
        if (pageNum < 1 || pageNum > this.totalPages || pageNum == this.currentPage) {
          console.log(pageNum + " 无效页码值")
          return;
        }
        this.currentPage = pageNum;
        this.myAuctionList();
      },
      getPrice(Price) {
        console.log("Price")
        // Price = 123456.789
        if (Price > 100000000) return Math.round(this.movePoint(Price, -8) * 100000000) / 100000000 + "亿"
        //最多保留4位小数
        if (Price > 10000) return Math.round(this.movePoint(Price, -4) * 10000) / 10000 + "万"
        if (Price < 10000) return Price
      },
      movePoint(num, moveNum) {
        //移动小数点
        //左移为负数,右移为正数
        console.log("movePoint")
        num = Number(num) //考虑以0开头的字符串
        let arr = (num + "").split('') //转换成字符串,拆成数组
        let pos = arr.indexOf('.') //小数点位置
        if (moveNum >= 0) {
          console.log("右移")
          return num * 10 ** moveNum
        } else {
          console.log("左移")
          if (pos == -1) {
            console.log("没有小数点")
            if (-moveNum < arr.length) {
              arr.splice(arr.length + moveNum, 0, ".")
            } else {
              arr.splice(0, 0, '0', '.')
              for (let i = 0; i < (-moveNum - arr.length); i++) {
                arr.splice(2, 0, '0')
              }
            }
          } else {
            console.log("有小数点")
            arr.splice(pos, 1) //删除小数点: i位,删除一个.
            if (-moveNum < pos) {
              arr.splice(pos + moveNum, 0, ".")
            } else {
              arr.splice(0, 0, '0', '.')
              for (let i = 0; i < (-moveNum - pos); i++) {
                arr.splice(2, 0, '0')
              }
            }
          }
        }

        let str = ""
        for (let a of arr) { //拼接字符
          str += a
        }
        num = Number(str) //字符串转数字
        return num;
      },
      getStartTime(startTime) {
        startTime = new Date(startTime)
        let month = startTime.getMonth() + 1
        let date = startTime.getDate()
        let hours = startTime.getHours()
        let minutes = startTime.getMinutes()
        return (month < 10 ? "0" + month : month) + "月" + (date < 10 ? "0" + date : date) + "日  " + startTime
          .getHours() + ":" + startTime.getMinutes()
      },
      getEndTime(startTime, auctionTime) {
        let endTime = new Date(new Date(startTime).getTime() + auctionTime * 1000 * 3600 * 24)
        let month = endTime.getMonth() + 1
        let date = endTime.getDate()
        let hours = endTime.getHours()
        let minutes = endTime.getMinutes()
        let time = (month < 10 ? "0" + month : month) + "月" + (date < 10 ? "0" + date : date) + "日  " + (hours < 10 ?
          "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes)
        return time;
      },
      myAuctionList() {
        console.log("myAuctionList")
        let params = {
          "currentPage": this.currentPage,
          "pageSize": this.pageSize,
        }
        params = this.$qs.stringify(params);
        let that = this
        this.axios.post("/moon-service-auction/tauction/selectParticipateTAuctions", params)
          .then(res => {
            console.log(res)
            that.AuctionList = res.list;
            that.currentPage = res.pageNum;
            that.pageSize = res.pageSize;
            that.total = res.total;
            that.totalPages = res.Pages;
          })
      }
    },
    created() {
      this.myAuctionList()
    }
  }
</script>

<style scoped>
  @import "../assets/myCard.css";
</style>
